<template>
	<div class="default-right">
		<div class="cat"><Cat></Cat></div>
		<div class="tips">
			<YRCardTitle title="公告栏"></YRCardTitle>
			<div class="content">
				<p>知足且上进</p>
				<p>温柔又坚定</p>
			</div>
		</div>
		<Music></Music>
		<h1 style="height: 15px;"></h1>
		<YRCard title="推荐阅读" :list="articleList"></YRCard>
		<h1 style="height: 15px;"></h1>
		<YRTag></YRTag>
	</div>
</template>

<script>
import YRCard from '@/components/common/YRCard.vue';
import YRTag from '@/components/common/YRTag.vue';
import YRCardTitle from '@/components/common/YRCardTitle.vue';
import Music from '@/components/common/Music.vue';
import Cat from '@/components/other/Cat.vue';
import { pageArticle } from '@/api/article';
export default {
	name: 'DefaultRight',
	components: {
		YRCard,
		YRTag,
		YRCardTitle,
		Music,
		Cat
	},
	data: () => {
		return {
			articleList: [],
			yrList: [
				{
					name: '文章归档',
					url: '/article/articleList'
				},
				{
					name: '友情链接',
					url: '/novel/novelList'
				},
				{
					name: '版本更新记录',
					url: '/poetry/poetryList'
				}
			],
			queryParams: {
				current: 1,
				size: 5,
				params: { recommend: 1 }
			}
		};
	},
	methods: {
		getArticleRecommend() {
			pageArticle(this.queryParams).then(res => {
				this.articleList = res.data.records.map(e => {
					return {
						name: e.title,
						url: '/article/articleContent/?id=' + e.id
					};
				});
			});
		}
	},
	created() {
		this.getArticleRecommend();
	}
};
</script>

<style lang="stylus" scoped="scoped">
.cat
	position absolute
	top -85px
	left 35px
	z-index 99999
	opacity 0.8
.tips
	border-radius 10px
	overflow hidden
	opacity 0.9
	background #fff
	margin-bottom 15px
	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
	.content
		padding 15px
		text-align center
		border 1px solid #eee
</style>
